<template>
	
	<div>
		<van-card
		  :desc="member.email"
		  :title="member.nickname"
		  :thumb="member.avatar"
		>
		 <template #tags>
		    <van-tag plain type="danger">性别:{{ member.gender }}</van-tag>
		    <van-tag plain type="danger">创建时间:{{ member.created_time }}</van-tag>
		  </template>
		</van-card>
		<van-grid>
		  <van-grid-item icon="photo-o" text="收藏夹" @click="getfavorites(member._id)" />
		  <van-grid-item icon="photo-o" text="用户详情" @click="showOne" />
		  <van-grid-item icon="photo-o" text="关于官方" @click="showOverlay" />
		</van-grid>
		<van-overlay :show="show" @click="show = false">
		  <div class="wrapper">
		    <div class="block">
			阿甘的前后端分离网站
			</div>
		  </div>
		</van-overlay>
		<van-overlay :show="show1" @click="show1 = false">
		  <div class="wrapper">
		    {{member}}
		  </div>
		</van-overlay>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui';
	function selectSec(num) {
		switch(num) {
		     case 1:
		        return "男"
		     case 0:
		        return "女"
		     default:
		        return "隐藏"
		} 
	}
	export default {
		data () {
			return {
				member: JSON.parse(sessionStorage.getItem('member')),
				show: false,
				show1: false
			}
		},
		created() {
			this.member.gender = selectSec(this.member.gender)
			this.member.avatar = 'http://127.0.0.1:8080' + this.member.avatar
		},
		methods: {
			showOverlay (){
				this.show = !this.show
			},
			showOne () {
				this.show1 = !this.show1
			},
			getfavorites(id){
				this.$http.post('http://127.0.0.1:8080/favorites',{id:id},{ emulateJSON: true }).then(result => {
								  if(result.body.err_code === 0){
									  Toast(result.body.message.toast)
									  var userfavorites = result.body.message.userfavorites
									  // console.log(userfavorites)
									  this.$router.push({ path: '/menberman',query:{userfavorites} })
								  }else{
									  Toast(result.body.message)
								  }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	 .wrapper {
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    height: 100%;
	  }
	
	  .block {
	    width: 120px;
	    height: 120px;
	    background-color: #fff;
	  }
</style>
